<template>
	<div class="loaderFlex flex">
		<div class="loader"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.loaderFlex{
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 100%;
		.loader {
			width: 34px;
			padding: 4px;
			aspect-ratio: 1;
			border-radius: 50%;
			background: rgba(255,255,255,0.66);
			--_m: conic-gradient(#0000 10%,#000),linear-gradient(#000 0 0) content-box;
			mask: var(--_m);
			-webkit-mask: var(--_m);
			mask-composite: subtract;
			-webkit-mask-composite: source-out;
			animation: l3 1s infinite linear;
		}
		@keyframes l3 {to{transform: rotate(1turn)}}
	}
</style>